<template>
  <transition name="slide">
    <musicList :songs="songs" :title="title" :bgImage="bgImage"></musicList>
  </transition>
</template>

<script>
import musicList from 'components/music-list/music-list'
import {mapGetters} from 'vuex'
import {getSingerDetail} from 'api/singer'
import {REQ_SUCCESS} from 'api/config'
import {createSong, getMusic} from 'common/js/song'

export default {
  name: 'singer-detail',
  data () {
    return {
      songs: []
    }
  },
  components: {
    musicList
  },
  computed: {
    title () {
      return this.singer.name
    },
    bgImage () {
      return this.singer.avatar
    },
    ...mapGetters([
      'singer'
    ])
  },
  created () {
    this._getSingerDetail()
  },
  methods: {
    palyerTheMusic(url) {
      this._getPlayKey(url)
    },
    _getSingerDetail() {
      if (!this.singer.mid) {
        this.$router.push('/singer')
        return
      }
      getSingerDetail(this.singer.mid).then((res) => {
        if (res.code === REQ_SUCCESS) {
          this._normallizeSongs(res.data.list)
        }
      })
    },
    _getPlayKey(url) {
      console.log(url)
      window.location.href = url
    },
    _normallizeSongs(list) {
      let ret = []
      list.forEach((item, index) => {
        let {musicData} = item
        if (musicData.songid && musicData.albummid) {
          getMusic(musicData.songmid).then((res) => {
            const svley = res.data.items
            const songVkey = svley[0].vkey
            ret.push(createSong(musicData, songVkey))
            if (index === list.length - 1) {
              console.log(ret)
              this.songs = ret
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  @import "~common/stylus/variable"
  .singer-detail {
    position fixed
    z-index 100
    top 0
    left 0
    right 0
    bottom 0
    background $color-background
  }
  .slide-enter-active, .slide-leave-active
    transition: all .2s
  .slide-enter, .slide-leave-to {
    transform translate3d(100%, 0, 0)
  }
</style>
